<template>
  <div class="app-container">
    <!--			查询表头-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input placeholder="请输入名称" v-model="SalaryParameter.goodsName"></el-input>
      </el-form-item>

      <el-form-item label="价格">
        <el-input placeholder="请输入价格" v-model="SalaryParameter.goodsPrice"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="queryData">查询</el-button>
        <el-button type="success" @click="reset">重置</el-button>
        <el-button type="success" @click="addUser">新增</el-button>
      </el-form-item>
    </el-form>
    <!--	table 标签-->

    <el-table border :data="list" style="width:100%">
      <!--		表示一列 循环输出标签的内容-->
      <el-table-column label="编号" prop="goodsId"></el-table-column>
      <el-table-column label="名称" prop="goodsName"></el-table-column>
      <el-table-column label="商品图片" prop="age">
        <template slot-scope="scope">
          <img :src="scope.row.imgUrl" alt="头像" style="width: 50px; height: 50px;">
        </template>
      </el-table-column>
      <el-table-column label="价格" prop="goodsPrice"></el-table-column>
      <el-table-column label="库存" prop="inventory"></el-table-column>
      <el-table-column label="使用方法" prop="eatingPattern"></el-table-column>
      <el-table-column label="产地" prop="origin"></el-table-column>
      <el-table-column label="功效" prop="efficacy"></el-table-column>
      <el-table-column label="简介" prop="info"></el-table-column>
      <!--		操作按钮-->
      <el-table-column label="操作" width="150px">
        <template slot-scope="x">
          <el-button type="warning" size="mini" @click="update(x.row)">修改</el-button>
          <el-button type="danger" size="mini" @click="del(x.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 修改- 对话框组件 -->
    <el-dialog :visible.sync="updateShow" width="30%" title="用户信息修改">
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="updateForm.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="updateForm.goodsPrice"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="updateForm.inventory"></el-input>
        </el-form-item>
        <el-form-item label="使用方法">
          <el-input v-model="updateForm.eatingPattern"></el-input>
        </el-form-item>
        <el-form-item label="场地">
          <el-input v-model="updateForm.origin"></el-input>
        </el-form-item>
        <el-form-item label="功效">
          <el-input v-model="updateForm.efficacy"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="updateForm.info"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="success" size="mini" @click="updateUser">修改</el-button>
          <el-button type="success" size="mini" @click="updateShow=false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 新增- 对话框组件 -->
    <el-dialog :visible.sync="addShow" width="30%" title="新增用户信息">
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="addForm.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="addForm.goodsPrice"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="addForm.inventory"></el-input>
        </el-form-item>
        <el-form-item label="使用方法">
          <el-input v-model="addForm.eatingPattern"></el-input>
        </el-form-item>
        <el-form-item label="产地">
          <el-input v-model="addForm.origin"></el-input>
        </el-form-item>
        <el-form-item label="功效">
          <el-input v-model="addForm.efficacy"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="addForm.info"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="success" size="mini" @click="saveUser">新增</el-button>
          <el-button type="success" size="mini" @click="addShow=false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {addGoods, deleteGoods, goodList, update} from "@/api/goods";

export default {
  data() {
    return {
      SalaryParameter: {//查询数据；创建对象，参数和后端命名相同
        goodsName: "", goodsPrice: ""
      },
      addForm: {
        //新增用户时接口中输入的参数,定义完后和表单绑定
      },
      updateForm: {//修改时，多一个UserId

      },
      // 定义数组，接受返回值
      list: [],
      addShow: false,//新增弹窗 新增用户，控制弹窗的显示否
      updateShow: false//修改弹窗
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let obj = {};
      obj.goodsName = this.SalaryParameter.goodsName;
      obj.goodsPrice = this.SalaryParameter.goodsPrice;

      goodList(this.SalaryParameter).then(res => {
        this.list = res.data;
      })
    },
    // 删除
    del(x) {
      const is = confirm("你确定删除数据吗？");
      if (is) {//确定删除,则删除
        let data = {goodsId: x.goodsId}
        deleteGoods(data).then(res => {
          this.$alert(res.msg)
          if (res.code == 200) {
            this.queryData();
          }
        })
      } else {
        this.$alert("取消删除");
      }
    },

    //保存数据
    saveUser() {
      addGoods(this.addForm).then(res => {
        this.$alert(res.msg)
        if (res.code == 200) {
          this.queryData();
          this.addShow = false;
        }
      })
    },

    addUser() {//新增用户，利用dailog弹窗
      this.addShow = true;
    },
    // 修改函数
    updateUser() {// 保存修改数据
      update(this.updateForm).then(res => {
        this.$alert(res.msg);
        if (res.code == 200) {
          this.queryData();
          this.updateShow = false;
        }
      })
    },

    //修改变量
    update(x) {
      // 弹窗，打开弹窗
      this.updateShow = true;
      // 数据回显
      this.updateForm = x;//赋值地址，对象赋值
    },

    reset() {
      // 重置函数
      this.ContractParameter.userName = "";
      this.ContractParameter.userId = "";
      this.queryData();
    },

    // 查询用户
    queryData() {
      let obj = {};
      obj.goodsName = this.SalaryParameter.goodsName;
      obj.goodsPrice = this.SalaryParameter.goodsPrice;

      goodList(obj).then(res => {
        if (res.code == 200) {
          this.list = res.data;
        } else {
          this.list = [];
          this.$alert(res.msg);
        }
      })
    }
  },
  mounted() {
    this.queryData();
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

